<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-05-11 11:00:39
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-06-15 15:06:51
 * @Description:
 *
-->

<template>
  <MyMain class="alarm-center-container">
    <el-tabs v-model="activeTab" class="tabs">
      <el-tab-pane label="事件总览" name="EventOverview" />
      <el-tab-pane label="事件详情" name="EventDetail" />
      <el-tab-pane label="告警总览" name="AlarmOverview" />
      <el-tab-pane label="告警规则" name="AlarmRule" />
      <el-tab-pane label="审计日志" name="AuditLogs" />
    </el-tabs>
    <div class="wrapper">
      <!-- 事件总览 -->
      <EventOverview v-if="activeTab === 'EventOverview'" />
      <!-- 事件详情 -->
      <EventDetail v-else-if="activeTab === 'EventDetail'" />
      <!-- 告警总览 -->
      <AlarmOverview v-else-if="activeTab === 'AlarmOverview'" />
      <!-- 告警规则 -->
      <AlarmRule v-else-if="activeTab === 'AlarmRule'" />
      <!-- 审计日志 -->
      <AuditLogs v-else-if="activeTab === 'AuditLogs'" />
    </div>
  </MyMain>
</template>

<script>
import MyMain from '@/components/Layout/MyMain.vue'
import EventOverview from './components/EventOverview.vue' // 事件总览
import EventDetail from './components/EventDetail.vue' // 事件详情
import AlarmOverview from './components/AlarmOverview.vue' // 告警总览
import AlarmRule from './components/AlarmRule.vue' // 告警规则
import AuditLogs from './components/AuditLogs.vue' // 审计日志

const TAB_KEYS = [
  'EventOverview',
  'EventDetail',
  'AlarmOverview',
  'AlarmRule',
  'AuditLogs'
]

export default {
  name: 'AlarmCenter',
  components: {
    MyMain,
    EventOverview,
    EventDetail,
    AlarmOverview,
    AlarmRule,
    AuditLogs
  },
  data() {
    return {
      activeTab: 'EventOverview' // 活动tab
    }
  },
  computed: {},
  created() {
    this.activeTab = TAB_KEYS.includes(this.$route.query.tab)
      ? this.$route.query.tab
      : 'EventOverview'
  },
  methods: {}
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.alarm-center-container {
  margin: 20px;
  width: auto;
  height: calc(100vh - 90px);
  padding: 10px 25px 20px;

  .wrapper {
    height: calc(100vh - 186px);
    overflow-y: auto;
  }

  .tabs {
    /deep/ .el-tabs__header {
      margin-bottom: 20px;
    }
    /deep/ .el-tabs__item {
      height: 46px;
      line-height: 46px;
      font-weight: 500;
    }
  }
}
</style>
